<template>
  <div class="app-box">
    <!-- 头部 -->
    <div class="header-box">
            <div class="left-box" @click="goPreviou">
              <img src="@/assets/left.png" alt="" srcset="">
            </div>
      <div class="h-box">往期考试</div>
    </div>

    <!-- 资料列表 -->
    <el-row class="app-item-contain" v-loading="loading" :gutter="20">
      <el-col :span="24" v-for="item in paperList" :key="item.id">
        <el-card :body-style="{ padding: '20px' }" class="paper-card" shadow="hover">
          <div class="paper-header">
            <span class="paper-title">{{ item.profileTitle }}</span>
            <el-tag :type="item.profileType === '0' ? 'success' : 'danger'">
              {{ item.profileType === '0' ? '文件' : '视频' }}
            </el-tag>
          </div>
          <div class="paper-content">
            <p>创建时间：{{ item.createTime }}</p>
            <p>
              资料地址：
              <el-button type="link" @click="viewDetails(item)">查看详情</el-button>
            </p>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 视频预览弹窗 -->
    <el-dialog
      :visible.sync="dialogVisible"
      width="60%"
      :before-close="handleClose"
      center
    >
      <template #title>
        {{ currentItem.profileTitle }}
      </template>
      <div v-if="isVideo">
        <video
          :src="fileUrl"
          controls
          style="width: 100%; height: auto;"
        ></video>
      </div>
      <div v-else>
        <a :href="fileUrl" target="_blank">点击此处下载资料</a>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">关闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { cultivateList } from '@/api/index'

export default {
  name: "indexPage",
  data() {
    return {
      loading: true,
      paperList: [],
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
      dialogVisible: false,
      currentItem: {},
      fileUrl: '',
      isVideo: false,
    }
  },
  mounted() {
    window.addEventListener('scroll', this.handleScroll);
  },
  beforeDestroy() {
    window.removeEventListener('scroll', this.handleScroll);
  },
  created() {
    let token = JSON.parse(localStorage.getItem('tokenInfo'))
    this.getList(this.queryParams, token)
  },
  methods: {
    goPreviou() {
      this.$router.back(-1)
    },
    handleScroll() {
      const documentHeight = Math.max(
        document.body.scrollHeight,
        document.documentElement.scrollHeight,
        document.body.offsetHeight,
        document.documentElement.offsetHeight,
        document.body.clientHeight,
        document.documentElement.clientHeight
      );
      const scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
      const windowHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;

      if (scrollTop + windowHeight + 50 >= documentHeight) {
        this.queryParams.pageSize += 10

        cultivateList(this.queryParams, JSON.parse(localStorage.getItem('tokenInfo'))).then(res => {
          if (res.code === 200) {
            this.paperList = [...this.paperList, ...res.rows]
            this.loading = false
          } else if (res.code === 401) {
            this.$router.push({ path: '/' })
          }
        })
      }
    },
    getList(data, token) {
      cultivateList(data, token).then(res => {
        if (res.code === 200) {
          this.paperList = res.rows
          this.loading = false
        } else if (res.code === 401) {
          this.$router.push({ path: '/' })
        }
      })
    },
    viewDetails(item) {
      this.currentItem = item
      this.fileUrl = 'http://localhost:8084' +item.profileContent
      // 判断文件类型
      const extension = this.fileUrl.split('.').pop().toLowerCase()
      if (['mp4', 'avi', 'mov', 'wmv'].includes(extension)) {
        this.isVideo = true
      } else {
        this.isVideo = false
      }
      this.dialogVisible = true
    },
    handleClose(done) {
      done();
    }
  }
}
</script>

<style scoped lang="scss">
.app-box {
  background-color: rgb(239, 243, 247);
  // padding: 20px;
}

.header-box {
  display: flex;
  align-items: center;
  padding: 10px 0;
}

.left-box {
  cursor: pointer;
}

.h-box {
  flex: 1;
  font-size: 24px;
  font-weight: bold;
  text-align: center;
}

.app-item-contain {
  // margin-top: 20px;
}

.paper-card {
  border-radius: 8px;
}

.paper-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.paper-title {
  font-size: 18px;
  font-weight: 600;
}

.paper-content p {
  margin: 5px 0;
  color: #606266;
}

.dialog-footer {
  text-align: right;
}
.app-box {
  background-color: rgb(239, 243, 247)
}

.text {
  font-size: 14px;
}

.item {
  padding: 18px 0;
}

.box-card {
  width: 480px;
}

.app-item-contain {
  background-color: white;
}

.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 150px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n+1) {
  background-color: #d3dce6;
}

.index-title-h3 {
  font-size: 16px;
  font-weight: 400;
  color: #1f2f3d;
  border-left: solid 10px #2ce8b4;
  padding-left: 10px;
}

.el-carousel__item h3 {
  color: #475669;
  font-size: 18px;
  opacity: 0.75;
  line-height: 300px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n+1) {
  background-color: #d3dce6;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
}

.button {
  padding: 0;
  float: right;
}

.image {
  width: 50%;
  height: 80%;
  display: block;
  margin: 20px auto 10px auto;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both
}

.carousel-img {
  display: inline-block;
  height: 300px;
  width: 100%;
}

.test-paper {
  margin-bottom: 50px;
}

.test-paper-item {
  //display: flex;
  //justify-content: space-between;
  border-top: 1px solid #999999;
  background: #fff;
  padding: 10px;
  margin-bottom: 1px;
  font-size: 14px;
  flex-direction: row;
  align-items: center;

  div {
    line-height: 1.8;
  }
}

.test-des {
  color: #909399;
  font-size: 13px;
}

.test-time {
  padding: 0 10px;
  color: #f37b1d;
  background-color: #eff3f7;
  font-size: 14px;
  display: flex;
  justify-content: center;
  border-radius: 10px;
  word-wrap: break-word;
  word-break: break-all;
  align-items: center;
}

.go-box {
  color: rgb(134, 206, 97);
}

.header-box {
  display: flex;
  padding: 5px 10px;
}

.h-box {
  width: 100%;
  font-size: 18px;
  font-weight: 600;
  text-align: center;
  margin-top: 0;
}
.littlt-box{
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>